<template>
  <div class="good-brand">
    <page-header
      v-bind="brandHeaderConfig"
      @searchClick="searchClick"
      @resetClick="resetClick"
    />
    <page-content
      ref="pageContentRef"
      v-bind="brandContentConfig"
      :single-btn-config="singleBtnConfig"
      @singleBtnClick="singleBtnClick"
      @confirmClick="handleConfirmClick"
      @cancelClick="handleCancelClick"
    >
      <template #brandLogo="row">
        <el-image
          v-if="row[row.prop]"
          style="width: 40px; height: 40px"
          preview-teleported
          :src="row[row.prop]"
          :preview-src-list="[row[row.prop]]"
          :initial-index="0"
        />
      </template>
      <template #uploadImage>
        <upload-image />
      </template>
    </page-content>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import PageHeader from '@/components/page-header/page-header.vue'
import brandHeaderConfig from '@/views/main/goods/goodBrand/config/header-config'
import PageContent from '@/components/page-content/page-content.vue'
import brandContentConfig from '@/views/main/goods/goodBrand/config/content-config'
import brandEditAndAddModalConfig from '@/views/main/goods/goodBrand/config/modal-edit-and-add'
import UploadImage from '@/components/upload-image/upload-image.vue'
import usePageHeader from '@/hooks/use-page-header'
import { SingleBtns } from '@/global/constant'
import type { SingleBtnType } from '@/global/types'

const singleBtnConfig = ref()

// ======================== page-header ========================
const { pageContentRef, searchClick, resetClick } = usePageHeader()
// ========================== page-content =========================
// 1.点击单操作按钮
const singleBtnClick = (type: SingleBtnType) => {
  if (type === SingleBtns.Edit || type === SingleBtns.Add) {
    singleBtnConfig.value = brandEditAndAddModalConfig
  }
  pageContentRef.value?.setModalStatus(true)
}

// 子传父
// 2.点击表单框的确定按钮
const handleConfirmClick = () => {
  singleBtnConfig.value = null
}
const handleCancelClick = () => {
  singleBtnConfig.value = null
}
</script>

<style scoped lang="less">
.logo {
  width: 40px;
  height: 40px;
  margin: 5px;
}
</style>
